import Link from 'next/link'; 
import type { Product } from '@/lib/api';

interface ProductListProps {
  products: Product[];
}

export default function ProductList({ products }: ProductListProps) {
  return (
    <div className="divide-y divide-gray-100">
      {products.map(product => (
        <div key={product.id} className="p-4 sm:p-6 flex space-x-4 hover:bg-gray-50/70 transition-colors duration-200">
          {product.coverImage && (
            <div className="w-24 h-16 sm:w-40 sm:h-24 flex-shrink-0">
              <img 
                src={product.coverImage} 
                className="w-full h-full object-contain rounded bg-white" 
                alt={product.title} 
              />
            </div>
          )}
          <div className="flex-grow flex flex-col min-w-0">
            <div className="flex items-start">
              <Link href={`/products/${product.slug}`} className="font-bold text-lg !text-black hover:!text-gray-800 break-words">
                {product.title}
              </Link>
              {product.isTop && (
                <span className="ml-2 flex-shrink-0 mt-1 px-2 py-0.5 text-xs bg-orange-100 text-orange-600 rounded-full">置顶</span>
              )}
            </div>
            <div className="flex-grow mt-2">
              <p className="text-xs text-gray-500 line-clamp-2 break-words">
                {product.summary || product.content.replace(/<[^>]*>/g, '')}
              </p>
            </div>
            <div className="text-sm text-gray-500 mt-2 flex items-center space-x-2 flex-wrap">
              <span>{product.developerNickname || product.author}</span>
              {product.category?.name && (
                <>
                  <span>·</span>
                  <span>{product.category.name}</span>
                </>
              )}
              
            </div>
          </div>
        </div>
      ))}
    </div>
  );
} 